// 定义聊天应用类
class ChatApp {
    // 构造函数，初始化应用状态并调用初始化方法
    constructor() {
        // 当前选中的对话ID
        this.currentConversationId = null;
        // 是否正在等待响应
        this.isWaitingForResponse = false;
        // 对话列表
        this.conversations = [];
        // 调用初始化方法
        this.init();
    }
    
    // 初始化方法，加载对话并设置事件监听器
    init() {
        // 加载对话列表
        this.loadConversations();
        // 设置事件监听器
        this.setupEventListeners();
    }
    
    // 加载对话列表的方法
    loadConversations() {
        // 发送请求获取对话列表，添加时间戳避免缓存
        fetch(`/api/conversations?t=${Date.now()}`)
            .then(response => {
                // 检查响应是否成功
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                // 将响应转换为JSON格式
                return response.json();
            })
            .then(conversations => {
                // 更新对话列表
                this.conversations = conversations;
                // 渲染对话列表
                this.renderConversationsList(conversations);
            })
            .catch(error => {
                // 打印加载对话失败的错误信息
                console.error('Error loading conversations:', error);
            });
    }
    
    // 渲染对话列表的方法
    renderConversationsList(conversations) {
        // 获取对话列表容器元素
        const container = document.getElementById('conversations-list');
        if (!container) {
            // 若未找到容器元素，打印错误信息并返回
            console.error('Conversations list container not found');
            return;
        }
        
        // 清空容器内容
        container.innerHTML = '';
        
        // 若对话列表为空，显示暂无对话的提示
        if (conversations.length === 0) {
            container.innerHTML = '<div class="p-4 text-center text-gray-500">暂无对话</div>';
            return;
        }
        
        // 遍历对话列表，为每个对话创建列表项
        conversations.forEach(conversation => {
            const item = document.createElement('div');
            item.className = `conversation-item p-3 border-b border-gray-700 cursor-pointer flex justify-between items-center ${conversation.id === this.currentConversationId ? 'bg-gray-800' : ''}`;
            item.dataset.id = conversation.id;
            
            // 创建对话标题元素
            const title = document.createElement('div');
            title.className = 'truncate flex-1';
            title.textContent = conversation.title;
            
            // 创建删除按钮
            const deleteBtn = document.createElement('button');
            deleteBtn.className = 'text-gray-400 hover:text-red-400 ml-2 opacity-0 conversation-item-hover:opacity-100';
            deleteBtn.innerHTML = '<i class="fas fa-times"></i>';
            deleteBtn.addEventListener('click', (e) => {
                // 阻止事件冒泡
                e.stopPropagation();
                // 调用删除对话方法
                this.deleteConversation(conversation.id);
            });
            
            // 将标题和删除按钮添加到列表项
            item.appendChild(title);
            item.appendChild(deleteBtn);
            
            // 为列表项添加点击事件，选择该对话
            item.addEventListener('click', () => {
                this.selectConversation(conversation.id);
            });
            
            // 将列表项添加到容器中
            container.appendChild(item);
        });
    }
    
    // 创建新对话的方法
    createNewConversation() {
        // 显示加载状态
        this.showLoadingState();
        
        // 发送POST请求创建新对话
        fetch('/api/conversations', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Cache-Control': 'no-cache',
                'Pragma': 'no-cache'
            },
            body: JSON.stringify({})
        })
        .then(response => {
            // 打印创建对话的响应状态
            console.log('创建对话响应状态:', response.status, response.statusText);
            
            // 检查响应是否成功
            if (!response.ok) {
                return response.text().then(text => {
                    let errorMsg = `服务器错误: ${response.status} ${response.statusText}`;
                    if (text) {
                        try {
                            // 尝试解析错误信息
                            const errorData = JSON.parse(text);
                            errorMsg = errorData.error || errorData.message || text;
                        } catch (e) {
                            errorMsg = text;
                        }
                    }
                    throw new Error(errorMsg);
                });
            }
            // 将响应转换为JSON格式
            return response.json();
        })
        .then(conversation => {
            // 打印创建对话成功信息
            console.log('创建对话成功:', conversation);
            
            // 更新当前对话ID
            this.currentConversationId = conversation.id;
            // 更新聊天标题
            this.updateChatHeader(conversation.title || '新对话');
            // 清空消息列表
            this.clearMessages();
            // 隐藏欢迎消息
            this.hideWelcomeMessage();
            
            // 将新对话添加到对话列表开头
            this.conversations.unshift(conversation);
            // 重新渲染对话列表
            this.renderConversationsList(this.conversations);
            
            // 高亮显示选中的对话
            this.highlightSelectedConversation(conversation.id);
            
            // 隐藏加载状态
            this.hideLoadingState();
            
            // 300毫秒后重新加载对话列表
            setTimeout(() => {
                this.loadConversations();
            }, 300);
        })
        .catch(error => {
            // 打印创建对话失败的错误信息
            console.error('创建对话失败详情:', error);
            // 隐藏加载状态
            this.hideLoadingState();
            
            let errorMsg = '创建对话失败，请重试';
            if (error.message.includes('Failed to fetch')) {
                errorMsg = '网络连接错误，请检查网络设置';
            } else if (error.message.includes('404')) {
                errorMsg = 'API端点不存在，请检查服务器配置';
            } else if (error.message.includes('500')) {
                errorMsg = '服务器内部错误，请联系管理员';
            } else if (error.message) {
                errorMsg = `错误: ${error.message}`;
            }
            
            // 显示错误提示
            alert(errorMsg);
        });
    }
    
    // 显示加载状态的方法
    showLoadingState() {
        // 获取新建对话按钮元素
        const newChatBtn = document.getElementById('new-chat-btn');
        if (newChatBtn) {
            // 禁用按钮
            newChatBtn.disabled = true;
            // 更新按钮内容显示加载状态
            newChatBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 创建中...';
        }
    }
    
    // 隐藏加载状态的方法
    hideLoadingState() {
        // 获取新建对话按钮元素
        const newChatBtn = document.getElementById('new-chat-btn');
        if (newChatBtn) {
            // 启用按钮
            newChatBtn.disabled = false;
            // 恢复按钮原始内容
            newChatBtn.innerHTML = '<i class="fas fa-plus"></i> 新对话';
        }
    }
    
    // 高亮显示选中对话的方法
    highlightSelectedConversation(conversationId) {
        // 获取所有对话列表项
        document.querySelectorAll('.conversation-item').forEach(item => {
            if (parseInt(item.dataset.id) === conversationId) {
                // 为选中的对话添加高亮样式
                item.classList.add('bg-gray-800');
            } else {
                // 移除未选中对话的高亮样式
                item.classList.remove('bg-gray-800');
            }
        });
    }
    
    // 选择对话的方法
    selectConversation(conversationId) {
        // 发送请求获取指定对话的信息，添加时间戳避免缓存
        fetch(`/api/conversations/${conversationId}?t=${Date.now()}`)
            .then(response => {
                // 检查响应是否成功
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                // 将响应转换为JSON格式
                return response.json();
            })
            .then(data => {
                // 更新当前对话ID
                this.currentConversationId = data.conversation.id;
                // 更新聊天标题
                this.updateChatHeader(data.conversation.title);
                // 渲染消息列表
                this.renderMessages(data.messages);
                // 隐藏欢迎消息
                this.hideWelcomeMessage();
                
                // 高亮显示选中的对话
                this.highlightSelectedConversation(conversationId);
            })
            .catch(error => {
                // 打印加载对话失败的错误信息
                console.error('Error loading conversation:', error);
            });
    }
    
    // 删除对话的方法
    deleteConversation(conversationId) {
        // 弹出确认对话框
        if (!confirm('确定要删除这个对话吗？此操作不可恢复。')) {
            return;
        }
        
        // 发送DELETE请求删除指定对话
        fetch(`/api/conversations/${conversationId}`, {
            method: 'DELETE',
            headers: {
                'Cache-Control': 'no-cache'
            }
        })
        .then(response => {
            // 检查响应是否成功
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            // 将响应转换为JSON格式
            return response.json();
        })
        .then(data => {
            if (data.success) {
                // 过滤掉已删除的对话
                this.conversations = this.conversations.filter(conv => conv.id !== conversationId);
                // 重新渲染对话列表
                this.renderConversationsList(this.conversations);
                
                if (this.currentConversationId === conversationId) {
                    // 若删除的是当前对话，重置当前对话ID
                    this.currentConversationId = null;
                    // 更新聊天标题
                    this.updateChatHeader('新对话');
                    // 清空消息列表
                    this.clearMessages();
                    // 显示欢迎消息
                    this.showWelcomeMessage();
                }
                
                // 重新加载对话列表
                this.loadConversations();
            }
        })
        .catch(error => {
            // 打印删除对话失败的错误信息
            console.error('Error deleting conversation:', error);
        });
    }
    
    // 更新对话标题的方法
    updateConversationTitle(conversationId, title) {
        // 发送PUT请求更新指定对话的标题
        fetch(`/api/conversations/${conversationId}/title`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ title })
        })
        .then(response => {
            // 检查响应是否成功
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            // 将响应转换为JSON格式
            return response.json();
        })
        .then(conversation => {
            // 更新聊天标题
            this.updateChatHeader(conversation.title);
            // 重新加载对话列表
            this.loadConversations();
        })
        .catch(error => {
            // 打印更新对话标题失败的错误信息
            console.error('Error updating conversation title:', error);
        });
    }
    
    // 发送消息的方法
    sendMessage(message) {
        // 若当前没有选中的对话，创建新对话
        if (!this.currentConversationId) {
            this.createNewConversation();
            setTimeout(() => {
                // 300毫秒后调用创建对话后发送消息的方法
                this.sendMessageAfterCreate(message);
            }, 300);
            return;
        }
        
        // 若正在等待响应，直接返回
        if (this.isWaitingForResponse) return;
        
        // 添加用户消息
        this.addMessage('user', message);
        // 设置为正在等待响应状态
        this.isWaitingForResponse = true;
        // 禁用输入框和发送按钮
        this.disableInput();
        // 显示输入指示器
        this.showTypingIndicator();
        
        // 发送POST请求发送消息
        fetch(`/api/conversations/${this.currentConversationId}/messages`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ message })
        })
        .then(response => {
            // 检查响应是否成功
            if (!response.ok) {
                return response.text().then(errorData => {
                    throw new Error(errorData.error || '发送消息失败');
                });
            }
            
            // 获取响应流的读取器
            const reader = response.body.getReader();
            // 创建文本解码器
            const decoder = new TextDecoder();
            // 存储助手回复内容
            let assistantContent = "";
            // 存储助手消息元素
            let assistantMessageElement = null;
            
            // 递归读取响应流的方法
            const readChunk = () => {
                return reader.read().then(({ value, done }) => {
                    if (done) {
                        // 读取完成，隐藏输入指示器
                        this.hideTypingIndicator();
                        // 重置等待响应状态
                        this.isWaitingForResponse = false;
                        // 启用输入框和发送按钮
                        this.enableInput();
                        return;
                    }
                    
                    // 解码当前块
                    const chunk = decoder.decode(value, { stream: true });
                    // 按行分割块内容
                    const lines = chunk.split('\n');
                    
                    for (const line of lines) {
                        if (line.startsWith('data: ')) {
                            // 提取数据内容
                            const dataStr = line.substring(6);
                            
                            if (dataStr === '[DONE]') {
                                // 数据传输完成，隐藏输入指示器
                                this.hideTypingIndicator();
                                // 重置等待响应状态
                                this.isWaitingForResponse = false;
                                // 启用输入框和发送按钮
                                this.enableInput();
                                return;
                            }
                            
                            try {
                                // 解析数据
                                const data = JSON.parse(dataStr);
                                if (data.content) {
                                    // 累加助手回复内容
                                    assistantContent += data.content;
                                    
                                    if (!assistantMessageElement) {
                                        // 创建助手消息元素
                                        assistantMessageElement = this.addMessage('assistant', '');
                                    }
                                    
                                    // 更新助手消息内容
                                    assistantMessageElement.textContent = assistantContent;
                                    
                                    if (assistantMessageElement.classList.contains('markdown-content')) {
                                        // 渲染Markdown内容
                                        renderMarkdown(assistantMessageElement);
                                    }
                                    
                                    // 获取消息容器元素
                                    const messagesContainer = document.getElementById('messages-container');
                                    if (messagesContainer) {
                                        // 滚动到消息容器底部
                                        messagesContainer.scrollTop = messagesContainer.scrollHeight;
                                    }
                                }
                            } catch (e) {
                                // 打印解析SSE数据失败的错误信息
                                console.error('解析SSE数据失败:', e, '数据:', dataStr);
                            }
                        }
                    }
                    
                    // 继续读取下一个块
                    return readChunk();
                });
            };
            
            // 开始读取响应流
            return readChunk();
        })
        .catch(error => {
            // 打印发送消息失败的错误信息
            console.error('Error sending message:', error);
            // 隐藏输入指示器
            this.hideTypingIndicator();
            
            let errorMsg = '抱歉，发生了错误。';
            if (error.message.includes('API密钥') || error.message.includes('API_KEY')) {
                errorMsg = 'API密钥未设置或无效，请检查设置。';
            } else if (error.message.includes('网络') || error.message.includes('连接')) {
                errorMsg = '网络连接错误，请检查网络设置。';
            } else if (error.message) {
                errorMsg = `错误: ${error.message}`;
            }
            
            // 添加错误消息
            this.addMessage('assistant', errorMsg);
            // 重置等待响应状态
            this.isWaitingForResponse = false;
            // 启用输入框和发送按钮
            this.enableInput();
        });
    }
    
    // 创建对话后发送消息的方法
    sendMessageAfterCreate(message) {
        if (this.currentConversationId) {
            // 若对话创建成功，发送消息
            this.sendMessage(message);
        } else {
            // 打印创建对话失败的错误信息
            console.error('Failed to create conversation');
            // 重置等待响应状态
            this.isWaitingForResponse = false;
            // 启用输入框和发送按钮
            this.enableInput();
        }
    }
    
    // 添加消息的方法
    addMessage(role, content) {
        // 获取消息容器元素
        const messagesContainer = document.getElementById('messages-container');
        if (!messagesContainer) {
            // 若未找到容器元素，打印错误信息并返回null
            console.error('Messages container not found');
            return null;
        }
        
        // 创建消息元素
        const messageElement = document.createElement('div');
        messageElement.className = `flex ${role === 'user' ? 'justify-end' : 'justify-start'} fade-in`;
        
        // 创建消息气泡元素
        const messageBubble = document.createElement('div');
        messageBubble.className = `max-w-3/4 p-3 message-${role}`;
        
        // 创建消息内容元素
        const contentElement = document.createElement('div');
        contentElement.textContent = content;
        
        if (role === 'assistant') {
            // 若为助手消息，添加Markdown类并渲染Markdown内容
            contentElement.className = 'markdown-content';
            renderMarkdown(contentElement);
        }
        
        // 将内容元素添加到消息气泡
        messageBubble.appendChild(contentElement);
        // 将消息气泡添加到消息元素
        messageElement.appendChild(messageBubble);
        // 将消息元素添加到消息容器
        messagesContainer.appendChild(messageElement);
        
        // 滚动到消息容器底部
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
        
        return contentElement;
    }
    
    // 渲染消息列表的方法
    renderMessages(messages) {
        // 清空消息列表
        this.clearMessages();
        
        // 若消息列表为空，显示欢迎消息并返回
        if (messages.length === 0) {
            this.showWelcomeMessage();
            return;
        }
        
        // 遍历消息列表，添加每条消息
        messages.forEach(message => {
            const contentElement = this.addMessage(message.role, message.content);
            if (message.role === 'assistant' && contentElement) {
                // 若为助手消息，添加Markdown类并渲染Markdown内容
                contentElement.className = 'markdown-content';
                renderMarkdown(contentElement);
            }
        });
        
        // 隐藏欢迎消息
        this.hideWelcomeMessage();
    }
    
    // 显示输入指示器的方法
    showTypingIndicator() {
        // 获取消息容器元素
        const messagesContainer = document.getElementById('messages-container');
        if (!messagesContainer) return;
        
        // 创建输入指示器元素
        const typingElement = document.createElement('div');
        typingElement.className = 'flex justify-start fade-in';
        typingElement.id = 'typing-indicator';
        
        // 创建消息气泡元素
        const bubble = document.createElement('div');
        bubble.className = 'max-w-3/4 p-3 message-assistant';
        
        // 创建输入动画元素
        const indicator = document.createElement('div');
        indicator.className = 'typing-animation';
        indicator.innerHTML = '<span></span><span></span><span></span><span></span>';
        
        // 将输入动画元素添加到消息气泡
        bubble.appendChild(indicator);
        // 将消息气泡添加到输入指示器元素
        typingElement.appendChild(bubble);
        // 将输入指示器元素添加到消息容器
        messagesContainer.appendChild(typingElement);
        
        // 滚动到消息容器底部
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }
    
    // 隐藏输入指示器的方法
    hideTypingIndicator() {
        // 获取输入指示器元素
        const indicator = document.getElementById('typing-indicator');
        if (indicator) {
            // 移除输入指示器元素
            indicator.remove();
        }
    }
    
    // 清空消息列表的方法
    clearMessages() {
        // 获取消息容器元素
        const messagesContainer = document.getElementById('messages-container');
        if (messagesContainer) {
            // 清空消息容器内容
            messagesContainer.innerHTML = '';
        }
    }
    
    // 显示欢迎消息的方法
    showWelcomeMessage() {
        // 获取欢迎消息元素
        const welcomeElement = document.getElementById('welcome-message');
        if (welcomeElement) {
            // 移除隐藏类，显示欢迎消息
            welcomeElement.classList.remove('hidden');
        } else {
            // 若未找到欢迎消息元素，打印警告信息
            console.warn('Welcome message element not found');
        }
    }
    
    // 隐藏欢迎消息的方法
    hideWelcomeMessage() {
        // 获取欢迎消息元素
        const welcomeElement = document.getElementById('welcome-message');
        if (welcomeElement) {
            // 添加隐藏类，隐藏欢迎消息
            welcomeElement.classList.add('hidden');
        } else {
            // 若未找到欢迎消息元素，打印警告信息
            console.warn('Welcome message element not found');
        }
    }
    
    // 更新聊天标题的方法
    updateChatHeader(title) {
        // 获取聊天标题元素
        const titleElement = document.getElementById('conversation-title');
        if (titleElement) {
            // 更新聊天标题内容
            titleElement.textContent = title;
        } else {
            // 若未找到聊天标题元素，打印警告信息
            console.warn('Conversation title element not found');
        }
    }
    
    // 禁用输入框和发送按钮的方法
    disableInput() {
        // 获取消息输入框元素
        const messageInput = document.getElementById('message-input');
        // 获取发送按钮元素
        const sendBtn = document.getElementById('send-btn');
        
        if (messageInput) messageInput.disabled = true;
        if (sendBtn) sendBtn.disabled = true;
    }
    
    // 启用输入框和发送按钮的方法
    enableInput() {
        // 获取消息输入框元素
        const messageInput = document.getElementById('message-input');
        // 获取发送按钮元素
        const sendBtn = document.getElementById('send-btn');
        
        if (messageInput) messageInput.disabled = false;
        if (sendBtn) sendBtn.disabled = false;
    }
    
    // 显示重命名对话框的方法
    showRenameModal() {
        // 若当前没有选中的对话，直接返回
        if (!this.currentConversationId) return;
        
        // 获取重命名对话框元素
        const modal = document.getElementById('rename-modal');
        // 获取重命名输入框元素
        const input = document.getElementById('rename-input');
        // 获取当前聊天标题元素
        const currentTitle = document.getElementById('conversation-title');
        
        if (!modal || !input || !currentTitle) return;
        
        // 设置重命名输入框的值为当前聊天标题
        input.value = currentTitle.textContent;
        // 移除隐藏类，显示重命名对话框
        modal.classList.remove('hidden');
        
        // 100毫秒后聚焦到重命名输入框
        setTimeout(() => {
            input.focus();
        }, 100);
    }
    
    // 隐藏重命名对话框的方法
    hideRenameModal() {
        // 获取重命名对话框元素
        const modal = document.getElementById('rename-modal');
        if (modal) {
            // 添加隐藏类，隐藏重命名对话框
            modal.classList.add('hidden');
        }
    }
    
    // 设置事件监听器的方法
    setupEventListeners() {
        // 获取新建对话按钮元素
        const newChatBtn = document.getElementById('new-chat-btn');
        if (newChatBtn) {
            // 为新建对话按钮添加点击事件，创建新对话
            newChatBtn.addEventListener('click', () => {
                this.createNewConversation();
            });
        }
        
        // 获取消息表单元素
        const messageForm = document.getElementById('message-form');
        if (messageForm) {
            // 为消息表单添加提交事件
            messageForm.addEventListener('submit', (e) => {
                // 阻止表单默认提交行为
                e.preventDefault();
                // 获取消息输入框元素
                const input = document.getElementById('message-input');
                if (input) {
                    // 获取输入框的值并去除首尾空格
                    const message = input.value.trim();
                    
                    if (message) {
                        // 清空输入框内容
                        input.value = '';
                        // 发送消息
                        this.sendMessage(message);
                    }
                }
            });
        }
        
        // 获取消息输入框元素
        const messageInput = document.getElementById('message-input');
        if (messageInput) {
            // 为消息输入框添加输入事件，自动调整输入框高度
            messageInput.addEventListener('input', function() {
                this.style.height = 'auto';
                this.style.height = (this.scrollHeight) + 'px';
            });
        }
        
        // 获取重命名按钮元素
        const renameChatBtn = document.getElementById('rename-chat-btn');
        if (renameChatBtn) {
            // 为重命名按钮添加点击事件，显示重命名对话框
            renameChatBtn.addEventListener('click', () => {
                this.showRenameModal();
            });
        }
        
        // 获取删除对话按钮元素
        const deleteChatBtn = document.getElementById('delete-chat-btn');
        if (deleteChatBtn) {
            // 为删除对话按钮添加点击事件，删除当前对话
            deleteChatBtn.addEventListener('click', () => {
                if (this.currentConversationId) {
                    this.deleteConversation(this.currentConversationId);
                }
            });
        }
        
        // 获取重命名取消按钮元素
        const renameCancelBtn = document.getElementById('rename-cancel-btn');
        if (renameCancelBtn) {
            // 为重命名取消按钮添加点击事件，隐藏重命名对话框
            renameCancelBtn.addEventListener('click', () => {
                this.hideRenameModal();
            });
        }
        
        // 获取重命名确认按钮元素
        const renameConfirmBtn = document.getElementById('rename-confirm-btn');
        if (renameConfirmBtn) {
            // 为重命名确认按钮添加点击事件，更新对话标题并隐藏对话框
            renameConfirmBtn.addEventListener('click', () => {
                const input = document.getElementById('rename-input');
                if (input) {
                    const newTitle = input.value.trim();
                    if (newTitle && this.currentConversationId) {
                        this.updateConversationTitle(this.currentConversationId, newTitle);
                        this.hideRenameModal();
                    }
                }
            });
        }
        
        // 获取重命名输入框元素
        const renameInput = document.getElementById('rename-input');
        if (renameInput) {
            // 为重命名输入框添加按键事件，按下Enter键触发确认按钮点击事件
            renameInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    const confirmBtn = document.getElementById('rename-confirm-btn');
                    if (confirmBtn) {
                        confirmBtn.click();
                    }
                }
            });
        }
        
        // 获取重命名对话框元素
        const renameModal = document.getElementById('rename-modal');
        if (renameModal) {
            // 为重命名对话框添加点击事件，点击对话框外部隐藏对话框
            renameModal.addEventListener('click', (e) => {
                if (e.target === e.currentTarget) {
                    this.hideRenameModal();
                }
            });
        }
    }
}

// 页面加载完成后初始化聊天应用
document.addEventListener('DOMContentLoaded', function() {
    window.chatApp = new ChatApp();
});